<template>
  <view class="box">
    <musichead title="搜索" :icon="true" :iconSearch="true"></musichead>
    <view class="box-search">  <uni-search-bar :radius="100" cancelButton="false" :focus="true" @input="input" v-model="ks"></uni-search-bar> </view>
    <view class="box-historyAndhot" v-if="this.searchList.length==0">
   <view class="box-history">
     <view class="search-history-title">
       <text>搜索历史</text>
       <uni-icons type="trash" size="20" @click="removeAll"></uni-icons>
     </view>
     <view class="box-his">
       <uni-tag v-for="(i,index) in historyList" :key="index" :text="i" class="his-tag" @click="toShow(i)"></uni-tag>
     </view>
   </view>
   <!-- 热搜榜 -->
   <view class="box-hot">
     <view class="box-hot-title">热搜榜</view>
     <view class="box-hot-body">
       <scroll-view scroll-y="true">
         <view class="box-hot-body-scroll"  v-for="(ii,index) in hotList" :key="index">
           <view class="box-hot-left">{{index+1}}</view>
           <view class="box-hot-center">
             <view>{{ii.searchWord}}</view>
             <view>{{ii.content}}</view>
           </view>
           <view class="box-hot-end">{{ii.score}}</view>
         </view>
       </scroll-view>
     </view>
   </view>
   </view>
   <view class="box-searchList" v-else v-for="(iii,index) in searchList" :key="index">
     <view class="box-search-left">
       <view>{{iii.name}}</view>
       <view>{{iii.artists[0].name}}--{{iii.name}}</view>
     </view>
     <view class="box-search-right">
       <view class="iconfont icon-bofang"></view>
     </view>
   </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        historyList:[],
        ipt:'',
        ks:'',
        hotList:[],
        searchList:[],
      }
    },
    onLoad(){
      this.getHotList() 
      uni.getStorage({
        key:'historyList',
        success: (res) => {
          this.historyList = res.data
        }
      })
    },
    methods: {
     async  getHotList(){
        let result = await uni.$http.get('/search/hot/detail')
        if(result.data.code==200){
          this.hotList = result.data.data
        }
      },
     async getSearch(){
       if(this.ipt===''){
       return  this.searchList =[]
       }
       else{
          let result =  await uni.$http.get('/search?keywords='+this.ipt)
          if(result.data.code==200){
            this.searchList = result.data.result.songs
          }
       }
      },
      input(e){
        clearTimeout(this.timer)
        this.timer = setTimeout(()=>{
          this.ipt = e
          this.getSearch()
          if(this.historyList.length>10){
            this.historyList.length=10
          }
          if(this.historyList.indexOf(this.ipt)==-1){
            this.historyList.unshift(this.ipt)
            uni.setStorage({
              key:'historyList',
              data: this.historyList
            });
          }
          else{
            return
          }
          
        },700)
      },
      removeAll(){
       // this.historyList =[]
       uni.clearStorage({
         key:'historyList',
         success:((res)=>{
         this.historyList =[]
         })
       })
      },
      toShow(i){
        this.ks=i
      }
    }
  }
</script>

<style>
  .box-search{
    margin-top:-40rpx;
  }
.search-history-title{
  display: flex;
  justify-content: space-between;
  font-size: 32rpx;
  margin-left:23rpx;
}
.box-his{
  margin-top:23rpx;
}
.his-tag{
  margin:18rpx 22rpx;
  border-radius: 32rpx;
  background: #e1e0e1;
  color:black;
  font-weight: 700; 
}
.box-hot{
  margin:88rpx 23rpx;
}
.box-hot-title{
  font-size:40rpx;
}
.box-hot-body-scroll{
  display: flex;
  justify-content: space-between;
  margin-top: 32rpx;
}
.box-hot-left{
  margin-top:10rpx;
  font-size: 44rpx;
  color:#f33a16;
}
.box-hot-center{
   margin-left:10rpx;
   width:500rpx;
}
.box-hot-center view:nth-child(1){
  font-size:49rpx;
}
.box-hot-center view:nth-child(2){
  font-size: 29rpx;
   color:#6c696b;
   margin-top:12rpx;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}
.box-hot-end{
  font-size: 32rpx;
  color:#797878;
}
.box-searchList{
  display:flex;
  justify-content: space-between;
  height:156rpx;
  border-top: 1px solid #dfdadb;
  border-bottom: 1px solid #dfdadb;
}
.box-search-left{
  margin-left:23rpx;
  /* line-height: 66rpx; */
}
.box-search-left view:nth-child(1){
  padding-top:32rpx;
  font-size: 50rpx;
  color:#0b2bf8;
}
.box-search-left view:nth-child(2){
  padding-top:12rpx;
  color:#7d7a7b;
}
.box-search-right view{
  font-size: 66rpx;
  margin-top: 66rpx;
  margin-right:32rpx;
  color:#8b8a8b;
}
</style>
